<template>
  <!-- <div v-if="props.type === 'raw'" v-html="icon"></div> -->
  <div :style="{ height: props.height ?? props.size, width: props.width ?? props.size }">
    <img :src="icon" class="icon" />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  // icon 图标
  name: {
    type: String,
    required: true
  },
  // 图标类名
  color: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: null
  },
  height: {
    type: String,
    default: null
  },
  size: {
    type: String,
    default: '30rpx'
  }
})

import { ref, onMounted } from 'vue'

const icon = ref('')

onMounted(() => {
  icon.value = `/static/icons/${props.name}.svg`
})
</script>

<style scoped>
.icon {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
